<!--
 @Description 新闻列表组件-右文左视样式
 @author gaohailan
 @date 2022/11/25
-->
<template>
  <section class="news-list-style-four">
    <section class="item-left">
      <van-image
        :src="setImgPath(getMapping(item, 'videoSmallCoverImgId'), getMapping(item, 'videoSmallCoverImgIdUrl'))"
        :fit="imgType"
      >
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
        <template v-slot:error>
          <img
            src="../../images/base/error-icon.png"
            alt
          >
        </template>
      </van-image>
      <span v-if="item.param3 >0">{{ getTime(item.param3) }}</span>
    </section>
    <section class="item-right">
      <section class="right-title etc3">{{ getMapping(item, 'mainTitle') || '' }}</section>
      <section class="right-txt">
        <span>{{ getMapping(item, 'publishTime') | newFormatTime }}</span>
        <img v-if="item.audioId" src="./images/news-audio.png" alt="">
      </section>
    </section>
  </section>
</template>
<script>
import mixins from '../mixins'
import newsMixins from './mixins'

export default {
  name: 'NewsListStyleFour',
  mixins: [mixins, newsMixins],
  // components: { EmptyPage },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  created() {
  }

}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.news-list-style-four {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: rem(20);
  position: relative;

  .item-left {
    flex-shrink: 0;
    width: rem(228);
    height: rem(148);
    border-radius: rem(8);
    margin-right: rem(20);
    position: relative;

    > span {
      position: absolute;
      right: rem(12);
      bottom: rem(8);
      font-size: rem(20);
      font-weight: 400;
      text-align: left;
      color: #ffffff;

      &::before {
        position: absolute;
        bottom: 0;
        left: rem(-20);
        margin-top: rem(-8);
        top: 50%;
        content: '';
        display: inline-block;
        height: 0;
        width: 0;
        border-top: rem(8) solid transparent;
        border-bottom: rem(8) solid transparent;
        border-left: rem(10) solid #fff;
        border-right: rem(8) solid transparent;
      }
    }

    .van-image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: rem(8);
      background: #c9c9c9;
      overflow: hidden;

      .van-image__error {
        > img {
          width: rem(120);
          height: rem(120);
        }
      }

      .play-icon {
        position: absolute;
        width: rem(80);
        height: rem(80);
        left: 50%;
        top: 50%;
        margin-left: rem(-40);
        margin-top: rem(-40);
      }

      .play-time-icon {
        position: absolute;
        bottom: rem(10);
        right: rem(10);
        color: #fff;
        font-size: rem(24);
        display: flex;
        justify-content: center;
        align-items: center;

        > img {
          width: rem(24);
          height: rem(24);
          margin-right: rem(10);
        }
      }
    }
  }

  .item-right {
    flex: 1;

    .right-title {
      font-size: rem(30);
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 1.5;
    }

    .right-txt {
      margin-top: rem(30);
      font-size: rem(22);
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > span {
        display: inline-block;
        margin-right: rem(20);
      }
      > img {
        width: rem(49);
        height: rem(49);
      }
    }
  }

  #courseVideoContainer {
    border-radius: rem(8);
    overflow: hidden;
  }
}
</style>
